<template>
  <div class="manager clearfix">
    <div class="title">
      <div class="fr">

        <div v-if="activeName == 'second'" style="display: inline-block;margin-right: 10px;">
         <!-- <p>范围：</p>
           <el-select style="width:150px"
            v-model="resourceSelect"
            value-key="areaId"
            @change="changeArea"
          >
         <el-option
           v-for="(item,index) in resourceList"
           :key="index"
           :label="item.resourceName"
           :value="item.resourceId"
         ></el-option> -->
          <!-- </el-select> -->
        </div>
         <span v-if="activeName =='first'">单位：万元</span>
         <span v-else>单位：万户</span>
      </div>
    </div>
   <div class="workTitle">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="收入趋势" name="first">
          <tab1 ref="tab1"   v-if="isFirst" />
        </el-tab-pane>
        <el-tab-pane label="业务量趋势" name="second">
          <tab2 ref="tab2"  v-if="isSecond"  />
        </el-tab-pane>
       </el-tabs>
   </div>

  </div>
</template>
<script>
  import tab1 from "./managerView1/receive";
  import tab2 from "./managerView1/volumeTrend";
  import {$budgetAPI} from "@/api";
  import {getCookie} from "@/common/js/cookie"
  export default {
     name: "manager1",
     components: {
       tab1,
       tab2,
     },
     data() {
       return {
         activeName: "first",
         isFirst:true,
         isSecond:false,
         resourceSelect:[],
         mainBusinessIncome:{},
         mainOperationIncome:{
           dictIncomeCompleteRate:0,
           mainIncomeCompleteRate:0,
           basicIncomeCompleteRate:0,
           numberIncomeCompleteRate:0,
         },
         mainDev:[],
         acctMonth:'',
         // resourceList: [
         //   {
         //     resourceName: "新增",
         //     resourceId: 1
         //   },
         //   {
         //     resourceName: "净增",
         //     resourceId: 2
         //   }
         // ],
       }
    },
    created(){

    },
    mounted(){
     this.getMainOperationIncomeData()
    },
    methods: {

      changeArea(val) {
        console.log(val)
      },
       //数据点击切换页请求不同的数据
       handleClick(tab, event) {
         if(tab.name == "first"){
           this.isFirst = true;
           this.isSecond = false;
           // this.$refs.tab1.init();
         }
         if(tab.name == "second"){
           this.isSecond = true;
           this.isFirst = false;
           // this.$refs.tab2.init();
         }
       },

       //获取主营数据接口
       getMainOperationIncomeData(){
         let token = getCookie('token')
         $budgetAPI.getMainOperationIncomeData(
           {token:token},
           res => {
             if (res.code == 0) {
                this.acctMonth = res.content.acctMonth.substring(0,4)+'年'+ (res.content.acctMonth.substring(4,5)>0?res.content.acctMonth.substring(4,5):'')+ res.content.acctMonth.substring(5,6)+'月';
                this.$emit('acctMonthData',this.acctMonth)
             }else {
               console.log(res);
             } 
           },
           err => {}
         );
       },
    },

  }
</script>

<style lang="scss" scoped>
  .manager {
    width: 100%;
    height: 520px;
    margin-top: 20px;
    width: 99%;
    border-radius: 5px;
    background-color: #ffffff;
    // border: 1px solid #dee5f3;
    position: relative;
    .title{
      position: absolute;
      height: 40px;
      line-height: 40px;
      right: 20px;
      p{
        display: inline-block;
      }
    }
   .workTitle{
    padding:0 20px;
   }
    // display: flex;


    //tab页样式
    /deep/ .el-tabs__item:hover {
      color: #292f3b;
      cursor: pointer;
    }
    .workTitle{
      /deep/ .el-tabs__active-bar{
        background-color: #6a82fd;
      }
    }

   /deep/  .el-tabs__item.is-active {
      background-color: transparent;
      color: #292f3b;
      border-radius: 5px 5px 0 0;
    }

   /deep/  .el-tabs__nav-wrap::after {
      background-color: #6a82fd;
    }
    /deep/  .el-tabs__item {
      padding: 0 15px 0 15px !important;
      height: 40px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      line-height: 40px;
      display: inline-block;
      list-style: none;
      font-size: 14px;
      font-weight: 800;
      color: #636d9a;
      position: relative;
    }
    /deep/ .el-tabs__header{
     border-bottom:1px solid #f1f1f161;
    }
    /deep/ .el-tabs__nav-wrap::after {
        height: 0px;
    }
  }
</style>
